<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack()
}
const filterForm = ref({
  type1: '',
  type2: [],
  type3: '',
})
</script>

<template>
  <view class="h-full flex flex-col bg-white">
    <wd-navbar title="选择筛选内容" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <view class="flex-1 overflow-y-auto p-4">
      <wd-form :model="filterForm">
        <view class="mt-4">
          <wd-text text="菜品类型" color="#333" />
          <wd-radio-group v-model="filterForm.type1" cell shape="button" :max="1">
            <wd-radio value="1">普通菜</wd-radio>
            <wd-radio value="2">称重菜</wd-radio>
            <wd-radio value="3">套餐</wd-radio>
          </wd-radio-group>
        </view>
        <view class="mt-4">
          <wd-text text="菜品属性（可多选）" color="#333" />
          <wd-checkbox-group v-model="filterForm.type2" cell shape="button">
            <wd-checkbox model-value="1">多规格</wd-checkbox>
            <wd-checkbox model-value="2">多做法</wd-checkbox>
            <wd-checkbox model-value="3">有加料</wd-checkbox>
          </wd-checkbox-group>
        </view>
        <view class="mt-4">
          <wd-text text="售卖状态" color="#333" />
          <wd-radio-group v-model="filterForm.type3" cell shape="button" :max="1">
            <wd-radio value="1">在售</wd-radio>
            <wd-radio value="2">停售</wd-radio>
          </wd-radio-group>
        </view>
        <view>
          <wd-text text="价格" color="#333" />
          <view class="mt-4 flex px-4">
            <wd-input placeholder="请输入最低价" class="w-[100px]" />
            <view class="mx-2">-</view>
            <wd-input placeholder="请输入最高价" class="w-[100px]" />
          </view>
        </view>
      </wd-form>
    </view>
    <view class="flex p-4">
      <wd-button class="flex-1" type="info" :round="false">重置</wd-button>
      <wd-button class="ml-4 flex-1" :round="false">确定筛选</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
